/**
* @file 我的订单-直购
* @author 张超
* @created 2023/7/05 08:00
* @updated 2023/7/05 18:00
*/
<template>
	<view class="order">
		<u-tabs :list="list" active-color="#b78c3d" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="cont" v-if="listItem.length>0">
			<view class="order-item-box" @click="goOrderDetail(item.id)" v-for="(item,index) in listItem" :key="index">
				<view class="order-top space-between fz14">
					<view class="">
						订单号：{{item.totalordernum}}
					</view>
					<view class="c-d00000">
						{{item.status_text}}
					</view>
				</view>
				<view class="order-info-box flex">
					<image class="mr10" :src="item.goodsimage_text" mode=""></image>
					<view class="goods-description">
						<view class="fz15 bold mb8 goods-title-box">
							{{item.goodsname}}
						</view>
						<view class="space-between">
							<view class="c6">
								规格：{{item.spec}}
							</view>
							<view class="c6">
								x{{item.number}}
							</view>
						</view>
					</view>
				</view>
				<view class="order-bottom space-between">
					<view class="">
						<text class="fz13">合计:</text>
						<text class="c-d22119 fz15 bold">{{item.totalmoney|xiaos}}<text
								class="fz12 normal">金币+</text>{{item.totalscore|xiaos}}<text
								class="fz12 normal">积分</text></text>
					</view>
					<view class="flex fz13">
						<!-- <u-button @click.stop="clickControls(item)" throttle-time='3000' v-if="item.status == 0"
							class="controls-btn">去支付</u-button> -->
						<u-button @click.stop="cuif()" throttle-time='3000' v-if="item.status == 1"
							class="controls-btn">催发货</u-button>
						<!-- <u-button @click.stop="wul()" throttle-time='3000' v-if="item.status == 2 || item.status == 3"
							class="material-flow-btn">查看物流</u-button> -->
						<u-button @click.stop="quer(item.id)" throttle-time='3000' v-if="item.status == 2"
							class="controls-btn ml10">确认收货</u-button>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="kong">
			<image src="@/static/my/page.png"></image>
		</view>
		<u-popup v-model="show" mode="center" width="600rpx" height="560rpx" border-radius="20">
			<view class="pop">
				<view class="pop-title" @click="close">
					<u-icon name="close" size="40"></u-icon>
					<text>请输入支付密码</text>
				</view>
				<view class="title-des">{{zhif.goodsname}}</view>
				<view class="swiper-mouay">
					<text>{{zhif.totalmoney|xiaos}}</text>
					<text>金币+</text>
					<text>{{zhif.totalscore|xiaos}}</text>
					<text>积分</text>
				</view>
				<view class="pop-number">
					<view class="">
						<text>支付方式</text>
						<text>金币+积分支付</text>
					</view>
					<u-message-input mode="box" :maxlength="6" font-size="35" width="60"
						@finish="finish"></u-message-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		priceConfig,
		orderList,
		doDrder
	} from '@/network/api.js'
	import orderItem from "@/components/order_item.vue";
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				// 判断直购/抢买，0直购，1抢购
				is: 0,
				// 判断待收货/待支付等
				current: 0,
				// 是否显示支付弹框
				show: false,
				// 支付数据
				zhif: {},
				listItem: [],
				page: 1
			}
		},
		components: {
			orderItem
		},
		onLoad(option) {
			if (option.data) {
				let data = JSON.parse(option.data)
				this.is = data.is
				// this.current = data.type
				if (this.is == 0) {
					//直购
				} else {
					//抢购
					this.list.splice(1, 1)
				}
			}

			this.orderListRe()
		},
		onShow() {
			this.orderListRe()
		},
		filters: {
			// 过滤小数点后面数据
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		onReachBottom() {
			this.page += 1
			this.orderListRe()
		},
		methods: {
			// 获取订单列表
			orderListRe() {
				let data = {
					page: this.page,
					pagesize: 10,
					type: this.current
				}
				orderList(data).then(res => {
					if (res.code == 1) {
						if (this.page == 1) {
							this.listItem = res.data.data
						} else {
							this.listItem = [...this.listItem,...res.data.data]
						}
						// console.log(this.listItem.length, '订单数据')
					}
				})
			},
			change(index) {
				this.current = index
				this.listItem = []
				this.page = 1
				this.orderListRe()
			},
			// 支付事件
			clickControls(item) {
				console.log(item, '支付')
				this.show = true
				this.zhif = item
			},
			// 催发货事件
			cuif() {
				uni.showToast({
					title: "已提醒发货",
					icon: "none",
					duration: 2000,
				});
			},
			// 查看物流事件
			wul() {
				uni.navigateTo({
					url: '/pages/subpackage/my/logisticsDetails'
				})
			},
			// 确认收货
			quer(idw) {
				let data = {
					id: idw,
					status: 3
				}
				doDrder(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "已确认收货",
							icon: "none",
							duration: 2000,
						});
					}
				})
			},
			// 跳转到订单详情
			goOrderDetail(id) {
				let data={
					type:1,
					ids:id
				}
				uni.navigateTo({
					url: '/pages/subpackage/my/orderDetail?data=' +	JSON.stringify(data)
				})
			},
			// 输入完密码触发
			finish(value) {
				this.show = false
			},
			// 关闭支付弹框
			close() {
				this.show = false
			}
		},
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	
	.order {
		background-color: #F3F3F3;
		.cont {
			margin: 0 20rpx;

			.order-item-box {
				background-color: #ffffff;
				margin-top: 20rpx;

				.order-top {
					height: 86rpx;
					padding: 0 28rpx;
					box-sizing: border-box;
				}

				.order-info-box {
					border-top: 1rpx solid #E6E6E6;
					border-bottom: 1rpx solid #E6E6E6;
					padding: 20rpx 30rpx;

					image {
						width: 166rpx;
						height: 166rpx;
						border-radius: 10rpx;
					}

					.goods-description {
						width: calc(100vw - 296rpx);

						.goods-title-box {
							width: calc(100vw - 246rpx);
							overflow: hidden; //超出文本隐藏
							text-overflow: ellipsis; ///超出部分省略号显示
							display: -webkit-box; //弹性盒模型
							-webkit-box-orient: vertical; //上下垂直
							-webkit-line-clamp: 2; //自定义行数
						}
					}
				}

				.order-bottom {
					height: 90rpx;
					padding: 0 28rpx;
					box-sizing: border-box;

					.controls-btn {
						width: 150rpx;
						height: 50rpx;
						background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
						border-radius: 25rpx;
						color: #ffffff;
						text-align: center;
						line-height: 50rpx;
						display: inline-block;
						padding: 0 !important;
						font-size: 26rpx;
						box-sizing: border-box;
					}

					.material-flow-btn {
						width: 150rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						border: 1rpx solid #CCCCCC;
						box-sizing: border-box;
						border-radius: 25rpx;
						display: inline-block;
						padding: 0 !important;
						font-size: 26rpx;
					}

					uni-button:after {
						content: " ";
						border: none !important;
					}
				}
			}
		}

		.kong {
			height: 100vh;
			text-align: center;
			>image {
				width: 300rpx;
				height: 300rpx;
				margin-top:300rpx;
			}
		}

		// 弹框
		.pop {
			padding: 57rpx 46rpx;

			.pop-title {
				display: flex;

				.u-icon {
					position: absolute;
				}

				>text {
					margin: 0 auto;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
				}
			}

			.title-des {
				text-align: center;
				margin: 50rpx 0 34rpx 0;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}

			.swiper-mouay {
				text-align: center;
				padding-bottom: 46rpx;
				color: #E80000;
				border-bottom: 1rpx solid #EEEEEE;

				>text:nth-child(odd) {
					font-size: 48rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
				}

				>text:nth-child(even) {
					font-size: 30rpx;
				}
			}

			.pop-number {
				>view:nth-child(1) {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;

					>text {
						display: block;
					}
				}
			}
		}
	}
</style>